<template>
  <div class="wholesale-list block">
    <div class="header">
      <h2 class="title">批发采购订单管理</h2>
      <tabs :isHiddenZero="true" :tabs-arr="tabArr" @returnIndex="handletabs" />
      <el-form ref="queryForm" :inline="true" label-position="right" :model="tableQuery">
        <el-form-item label="订单编号">
          <el-input v-model.trim="tableQuery.orderCode" type="text" placeholder="请输入订单编号" />
        </el-form-item>

        <el-form-item label="供应商" prop="supplierName">
          <el-select
            v-model="tableQuery.supplierName"
            filterable
            remote
            clearable
            placeholder="请输入关键词"
            :remote-method="supplierNameRemoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in supplierNameOptions"
              :key="item.orderCode"
              :label="item.supplierName"
              :value="item.supplierName"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="生产厂家">
          <el-select
            v-model="tableQuery.originalFactoryName"
            filterable
            remote
            clearable
            placeholder="请输入关键词"
            :remote-method="originalFactoryNameRemoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in originalFactoryNameOptions"
              :key="item.orderCode"
              :label="item.originalFactoryName"
              :value="item.originalFactoryName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否有账期">
          <el-select v-model="tableQuery.isDelayPay" clearable placeholder="请选择">
            <el-option label="有账期" value="1"></el-option>
            <el-option label="无账期" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品线" style="margin-left:14px">
          <!-- <el-input v-model="tableQuery.productLineCode" type="text" placeholder="请输入产品线名称" /> -->
          <el-select
            v-model="tableQuery.productLineCode"
            filterable
            remote
            clearable
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.productLineCode"
              :label="item.productLineName"
              :value="item.productLineCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="订单类型">
        <el-select v-model="tableQuery.orderTypeId" clearable placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.orderCode"
            :label="item.orderTypeName"
            :value="item.orderTypeId"
          />
        </el-select>
      </el-form-item>

        <el-form-item label="订单提交日期">
          <el-date-picker
            v-model="commitDate"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item class="form-button">
          <el-button type="primary" @click="queryFormQuery">查询</el-button>
          <el-button @click="queryFormReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <section class="el-container container-box is-vertical">
      <div class="exportex_box">
        <div class="operate">
          <el-button type="primary" size="mini" @click="uploadPayPic">上传付款凭证</el-button>
        </div>
        <div class="operate">
          <el-button type="primary" :loading="detailExIsLoaded" size="mini" @click="exportDetailEx">订单详情导出</el-button>
        </div>
        <div class="operate">
          <el-button type="primary" :loading="isLoaded" size="mini" @click="exportEx">订单导出</el-button>
        </div>
      </div>
      <el-editable
        :data="payload.content"
        height="200"
        stripe
        v-loading="tableLoading"
        :columns="listColumns"
        :payload="payload"
        :needPagination="true"
        @reload="reloadProductData"
        @selection-change="selectionChange"
      >
        <template slot="default-file" slot-scope="scope">
          <div v-if="scope.row.orderStatus !== 1 && scope.row.orderStatus !== 8 " @click="openUploadDialog(scope)" style="cursor: pointer;">
            <span style="color: #2371C5">
              {{scope.row.isUploadPayFile === '1' ? '已上传' : '未上传'}}
            </span>
          </div>
        </template>
        <template slot="default-orderStatusName" slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.orderStatus === 9"
            class="failColor"
            @click="showDialog(scope.row)"
          >
            {{
            scope.row.orderStatusName
            }}
          </el-button>
          <span v-else>{{ scope.row.orderStatusName }}</span>
        </template>
        <template slot="default-operation" slot-scope="scope">
          <el-button v-if="scope.row.orderStatus === 1" type="text" @click="editGo(scope.row)">编辑</el-button>
          <el-button
            type="text"
            v-if="scope.row.orderStatus !== 1"
            @click="checkDetail(scope.row)"
          >查看</el-button>
          <el-button
            v-if="scope.row.orderStatus === 3 && showPayBut"
            type="text"
            @click="toPay(scope.row)"
          >去支付</el-button>
          <el-button
            v-if="(scope.row.orderStatus === 5 || scope.row.orderStatus === 6) && scope.row.isDeliver !== '1'"
            type="text"
            @click="takeDialog(scope.row)"
          >收货</el-button>
          <!-- 支付方式需要修改 -->
          <!-- <el-button
            v-if="scope.row.payType !== '2' && scope.row.orderStatus === 2 || scope.row.orderStatus === 3 "
            type="text"
            @click="delDialog(scope.row)"
          >取消</el-button>-->
          <el-button
            v-if="scope.row.orderStatus === 9"
            type="text"
            @click="resubmit(scope.row)"
          >复制编辑</el-button>
          <el-button
            v-if="scope.row.orderStatus === 9 || scope.row.orderStatus === 1 "
            type="text"
            @click="delDialog(scope.row)"
          >删除</el-button>
          <el-button
            type="text"
            @click="onPrint(scope.row)"
          >打印</el-button>
        </template>
      </el-editable>
      <!-- 校验失败错误提醒 -->
      <el-dialog
        title="错误提醒"
        :modal="true"
        :fullscreen="fullscreen"
        custom-class="dialog-custom"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-editable
          stripe
          v-loading="errorTableLoading"
          :data="errorMsgData.content"
          :payload="errorMsgData"
          :columns="columns"
          :needPagination="true"
          @reload="reloadError"
        />
      </el-dialog>
      <!-- 删除或取消 -->
      <el-dialog
        :title="dialogTitle"
        custom-class="dialog-custom"
        :visible.sync="delDialogVisible"
        width="30%"
      >
        <h2 v-show="orderIds.orderStatus === 1 || orderIds.orderStatus === 9">是否要删除此订单？</h2>
        <h2 v-show="orderIds.orderStatus === 2 || orderIds.orderStatus === 3">是否要取消此订单？</h2>
        <p style="color:red;text-align: center;" v-show="orderIds.orderStatus === 3">请确认财务未支付此订单！</p>

        <div class="delBtn" @click="concelDel">
          <el-button>取消</el-button>
          <el-button type="primary" @click="delSure">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="上传付款凭证"
        width="510px"
        class="upload-pay-pic__dialog"
        :before-close="closeUploadDialog"
        :file-list="payPicFiles"
        :visible.sync="showUploadDialog">
        <p class="upload-pay-pic__tips">请上传每张大小不超过5Mb的png、jpg文件</p>
        <p class="upload-pay-pic__tips">上传多张图片：</p>
        <el-upload
          action="#"
          ref="file-upload"
          list-type="picture-card"
          :http-request="httpRequest"
          multiple
          :accept="uploadAccept"
          v-loading="fileUploadLoading"
          @input="beforeImgUpload"
          :file-list="payPicFiles"
          :on-change="onChange"
          :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="deleteImgItem(file, file.status === 'ready')">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeUploadDialog">取消</el-button>
          <el-button @click="uploadPicConfirm" type="primary">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="imgDialogVisible" style="text-align: center">
        <img style="max-width: 100%;height: auto;" :src="dialogImageUrl" alt="">
      </el-dialog>
    </section>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
